<script>
/* eslint-disable */
</script>
<template>
	<div>
		<AutoComplete
            v-model="ipt[0]"
			:data="data3"
			:filter-method="filterMethod"
			placeholder="input here"
			style="width:200px"
		>
		</AutoComplete>
		<draggable
			class="dragArea"
			tag="ul"
			:list="tasks"
			:group="{ name: 'g1' }"
		>
			<!-- <AutoComplete
				v-model="value3"
				:data="data3"
				:filter-method="filterMethod"
				placeholder="input here"
				style="width:200px"
			>
			</AutoComplete> -->
			<!-- <Input v-if="tasks.length == 0" style="width: 300px" /> -->
			<li v-for="el in tasks" :key="el.key">
				<p>{{ el.name }}</p>
				<!-- v-model="value3" -->

				<!-- <Input v-model="el.name" style="width: 300px" /> -->
				<nested-draggable :tasks="el.tasks" :ipt="el.ipt" />
			</li>
		</draggable>
	</div>
</template>
<script>
import draggable from 'vuedraggable'

export default {
	props: {
        ipt: {
            required: true,
			type: Array
        },
		tasks: {
			required: true,
			type: Array
		}
	},
	components: {
		draggable
	},
	data() {
		return {
			// value3: '',
			data3: ['Steve Jobs', 'Stephen Gary Wozniak', 'Jonathan Paul Ive']
		}
	},
	methods: {
		filterMethod(value, option) {
			return option.toUpperCase().indexOf(value.toUpperCase()) !== -1
		}
	},
	name: 'nested-draggable'
}
</script>
<style scoped>
.dragArea {
	min-height: 50px;
	outline: 1px dashed;
}
/* .ivu-auto-complete > ul {
	padding-inline-start: 0px !important;
} */
/* .ivu-select-dropdown-list
{
	padding-inline-start: 0px !important;
} */
</style>
